<template>
  <div style="position: relative;">
    <div class="el-date-editor el-input el-input--medium el-input--prefix el-input--suffix el-date-editor--date" style="width: 100%;">
      <input
        type="text"
        readonly="readonly"
        autocomplete="off"
        name=""
        placeholder="选择日期"
        class="el-input__inner"
        v-model="diyDateList[id].value"
        @click.stop="toggleSelector"
      />
      <span class="el-input__prefix">
        <i class="el-input__icon el-icon-date"></i>
      </span>
      <span class="el-input__suffix">
        <span class="el-input__suffix-inner">
          <i class="el-input__icon"></i>
        </span>
      </span>
    </div>


    <!-- start 选择区域 -->
    <div
      class="diy-date-picker-panel el-picker-panel el-date-picker el-popper"
      style="z-index: 1; position: absolute;"
      x-placement="bottom-start"
      v-if="diyDateList[id].isShow"
      @click.stop="stopEvent"
    >
      <div class="el-picker-panel__body-wrapper">
        <div class="el-picker-panel__body">
          <div class="el-date-picker__header">
            <button
              type="button"
              aria-label="上个月"
              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left"
              @click.stop="prevMonth"
            ></button>
            <span @click.stop="toggleStatus" role="button" class="el-date-picker__header-label">{{month}} 月</span>
            <button
              type="button"
              aria-label="下个月"
              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right"
              @click.stop="nextMonth"
            ></button>
          </div>


          <div class="el-picker-panel__content">
            <table v-if="status == 'd'" cellspacing="0" cellpadding="0" class="el-date-table">
              <tbody>
                <tr v-for="row in dayList" class="el-date-table__row">
                  <td v-for="cell in row" class="available" :class="{'selected' : day == cell}">
                    <div>
                      <span @click.stop="select(cell)">{{cell}}</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>

            <table v-if="status == 'm'" class="el-month-table">
              <tbody>
                <tr v-for="row in monthList">
                  <td v-for="cell in row" :class="{'current' : monthStr == cell}">
                    <div>
                      <a @click.stop="selectMonth(cell)" class="cell">{{cell}}</a>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div x-arrow="" class="popper__arrow" style="left: 35px;"></div>
    </div>
    <!-- end 选择区域 -->
  </div>
</template>

<script>
export default {
  name: 'DiyDatePicker',
  props: {
      id: {
          type: String,
          required: true
      },
      diyDateList: {
        type: Object,
        required: true
      }
  },
  data() {
    return {
      status: "d", // 选择框模式 "m": "month", "d": "day"
      month: 1, // 选择的月份
      monthStr: "一月",
      day: 1, // 选择的日期
      monthList2: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      monthList: [
        ["一月", "二月", "三月", "四月"],
        ["五月", "六月", "七月", "八月"],
        ["九月", "十月", "十一月", "十二月"],
      ],
      dayList: [], // 日期列表
    };
  },
  mounted() {
    let that = this;
    that.status = "d";
    that.month = 1;
    that.monthStr = "一月";
    that.day = 1;
    that.resertMonthList();
  },
  methods: {
    // 阻止事件冒泡
    stopEvent() {
      
    },
    // 显示选择器
    toggleSelector() {
      const CurrentId = this.id;
      for(let id in this.diyDateList) {
        this.diyDateList[id].isShow = false;
        if(id == CurrentId) {
          this.diyDateList[id].isShow = !this.diyDateList[id].isShow;
        }
      }
    },
    // 移除选择器
    closeSelector() {
      const CurrentId = this.id;
      this.diyDateList[CurrentId].isShow = false;
    },
    // 切换选择类型
    toggleStatus() {
      this.status = "m";
    },
    // 上个月份
    prevMonth() {
      if(this.month > 1){
        this.month--;
        this.monthStr = this.monthList2[this.month - 1];
        this.resertMonthList();
      }
    },
    // 下个月份
    nextMonth() {
      if(this.month < 12) {
        this.month++;
        this.monthStr = this.monthList2[this.month - 1];
        this.resertMonthList();
      }
    },
    // 选择月份
    selectMonth(cell) {
      this.monthStr = cell;
      this.day = 1;
      this.month = this.monthList2.indexOf(cell) + 1;
      this.status = "d";
      this.resertMonthList();
    },
    // 选择日期
    select(num) {
      this.day = num;
      if(this.month < 10) {
        this.diyDateList[this.id].value = '0' + this.month;
      }else {
        this.diyDateList[this.id].value = this.month;
      }
      if(this.day < 10) {
        this.diyDateList[this.id].value += '-0' + this.day;
      }else {
        this.diyDateList[this.id].value += '-' + this.day;
      }
      this.$emit('update-date', this.id, this.diyDateList[this.id].value);
      this.closeSelector();
    },
    // 重载日历
    resertMonthList() {
      const DAY_28 = [2];
      const DAY_30 = [4, 6, 9, 11];
      const DAY_31 = [1, 3, 5, 7, 8, 10, 12];
      let length = 28;
      if(DAY_30.indexOf(this.month) >= 0) {
        length = 30;
      } else if(DAY_31.indexOf(this.month) >= 0) {
        length = 31;
      }
      this.dayList = [];
      let arr = [];
      for(let i=1; i<=length; i++) {
        arr.push(i);
        if(i % 7 == 0 || i == length) {
          this.dayList.push(arr);
          arr = [];
        }
      }
    }
  }
};
</script>
